<template>
  <div id="openlayersContainer" ref="openlayersContainer"></div>
</template>

<script setup>
import { onMounted } from 'vue'
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile.js'
import Map from 'ol/Map.js'
import XYZ from 'ol/source/XYZ.js'
import 'ol/ol.css'
import Feature from 'ol/Feature.js'
import Point from 'ol/geom/Point.js';
import VectorSource from 'ol/source/Vector.js'
import VectorLayer from 'ol/layer/Vector.js'
import Style from 'ol/style/Style.js'
import Icon from 'ol/style/Icon.js'
import CircleStyle from 'ol/style/Circle.js'
import Fill from 'ol/style/Fill.js'
import Text from 'ol/style/Text.js'
import Stroke from 'ol/style/Stroke.js'
import { LineString } from 'ol/geom';
import Select from 'ol/interaction/Select.js'
import GeoJSON from 'ol/format/GeoJSON.js'
import Draw from 'ol/interaction/Draw.js'
import { pointerMove } from 'ol/events/condition';
let map = null

onMounted(async () => {
  map = new Map({
    target: 'openlayersContainer'
  });
  map.setView(view)
  map.addLayer(gaodeLayer);
  map.addLayer(vectorLayer)
  // 增加select事件
  map.addInteraction(select)
  // map.addInteraction(drawLine)
  // map.addLayer(lineLayer)

})

const view = new View({
  center: [114.3165, 30.5264],
  zoom: 5,
  maxZoom: 18,
  minZoom: 2,
  projection: 'EPSG:4326'
})
// 高德地图
const gaodeSourse = new XYZ({
  // 高德地图
  url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',
})
const gaodeLayer = new TileLayer({
  source: gaodeSourse
})

const vectorSource = new VectorSource({
  url: 'https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json',
  format: new GeoJSON()
})

const vectorLayer = new VectorLayer({
  source: vectorSource,
  style: new Style({
    fill: new Fill({
      color: 'rgba(255, 255, 255, 0.2)'
    }),
    stroke: new Stroke({
      color: '#ffcc33',
      width: 2
    }),

  })
})
const lineVectorSource = new VectorSource({

})
const lineLayer = new VectorLayer({
  source: lineVectorSource,
  style: new Style({
    stroke: new Stroke({
      color: 'red',
      width: 6
    })
  })
})
const select = new Select({
    condition: pointerMove,
    filter: function (feature, layer) {
      console.log(feature.getGeometry())
      return layer === vectorLayer
    }
}
)
select.on('select', function (e) {
  const features = e.selected
  features.forEach(feature => {
    feature.setStyle(
      new Style({
        fill: new Fill({
          color: 'rgba(255, 0, 0, 0.2)',
        }),
      })
    )
  })
})
const drawLine = new Draw({
  type: 'LineString',
  source: lineVectorSource,
  style: new Style({
    stroke: new Stroke({
      color: 'red',
      width: 2
    })
  }),
  // finishCondition: function (e) {
  //   return e.type === 'rightclick';
  // }
})


</script>

<style>
* {
  margin: 0;
  padding: 0;
}

#openlayersContainer {
  width: 100vw;
  height: 100vh;

}

.button-container {
  position: absolute;
  left: 100px;
  top: 100px;
  z-index: 1;
}
</style>
